<template>
    <swiper :options="swiperOption" @ready="handlerReady">
        <swiper-slide
            v-for="(item, index) in data"
            :key="index"
            :class="[slideClass, { [slideActiveClass]: value === index }]"
        >
            <slot :item="item" />
        </swiper-slide>
    </swiper>
</template>

<script>
export default {
    name: 'nav-swiper',
    data() {
        return {
            mySwiper: null,
            swiperOption: {
                initialSlide: this.value,
                slidesPerView: 'auto',
                centeredSlides: true,
                centeredSlidesBounds: true,
                freeMode: true,
                resizeObserver: false,
                updateOnWindowResize: false,
                on: {
                    tap: () => {
                        this.$emit('input', this.mySwiper.clickedIndex);
                    },
                },
            },
        };
    },
    props: {
        data: {
            type: Array,
            default() {
                return [];
            },
        },
        slideClass: String,
        slideActiveClass: String,
        value: Number,
    },
    methods: {
        handlerReady(swiper) {
            this.mySwiper = swiper;
        },
    },
    mounted() {
        window.addEventListener('resize', () => {
            this.$nextTick(() => {
                this.mySwiper.$el[0].scrollTo({
                    left: -200,
                });
            });
        });
    },
    watch: {
        value: {
            immediate: true,
            handler(val) {
                this.$nextTick(() => {
                    this.mySwiper.slideTo(val);
                });
            },
        },
    },
    components: {},
};
</script>
<style lang="scss"></style>
